<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery Banner Rotator</title>
    <link rel="stylesheet" type="text/css" href="css/preview.css"/>
	<link rel="stylesheet" type="text/css" href="css/wt-rotator.css"/>
	<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>

    <script type="text/javascript" src="js/jquery.wt-rotator.min.js"></script>    
	<script type="text/javascript" src="js/preview.min.js"></script>
    <!--[if lt IE 9]>
  	<style>
    	.panel {
	    	border-left:1px solid #444;
			border-right:1px solid #444;
        }
    </style>
    <![endif]-->    
</head>
<body>
<div class="panel">
	<div class="title"><img src="title.png" alt="jQuery Banner Rotator"/></div>
 	<div class="container">
        <div class="wt-rotator">
            <div class="screen">
                <noscript><img src="images/triworks_abstract17.jpg"/></noscript>
            </div>
            <div class="c-panel">
                <div class="buttons">
                    <div class="prev-btn"></div>
                    <div class="play-btn"></div>    
                    <div class="next-btn"></div>               
                </div>
                <div class="thumbnails">

                    <ul>
                        <li>
                            <a href="images/triworks_abstract17.jpg" title="3D abstract art">
							<img src="images/thumbs/triworks_abstract17.jpg"/></a>
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>                        
                            <div style="left:5px; top:94px; width:336px; height:0;"> 
                            	<h1>JQuery Banner Rotator</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                Ut tincidunt mi a lectus gravida pulvinar. Aliquam viverra cursus felis, 
                                lobortis elementum tortor malesuada non. 
                                Suspendisse hendrerit tortor a mauris auctor eu sodales metus laoreet. </div>
                        </li>
                        <li>

                            <a href="images/sf.jpg" title="san francisco"><img src="images/thumbs/sf.jpg"/></a>
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div style="left:5px; top:36px; width:336px; height:0; color:#000; background-color:#FFF"> 
                                <h1 style="color:#0CF">JQuery Banner Rotator</h1>
                                Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur. 
                                Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et. 
                                Cum ei ludus feugait luptatum.</div>                                                  	
                        </li>
                        <li>
                            <a href="images/triworks_abstract26.jpg" title="3D abstract art"><img src="images/thumbs/triworks_abstract26.jpg"/></a>   
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>

                            <div style="left:5px; top:36px; width:336px; height:0; color:#000; background-color:#FFF">
                            	<h1 style="color:#0CF">JQuery Banner Rotator</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                Ut tincidunt mi a lectus gravida pulvinar. Aliquam viverra cursus felis, 
                                lobortis elementum tortor malesuada non. 
                                Suspendisse hendrerit tortor a mauris auctor eu sodales metus laoreet. </div>                                                          	                   
                        </li>
                        <li>
                            <a href="images/tokyo.jpg" title="rainbow bridge"><img src="images/thumbs/tokyo.jpg"/></a>                  
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div style="left:5px; top:36px; width:350px; height:0;"> 
                                <h1>JQuery Banner Rotator</h1>

                                Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur. 
                                Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et. 
                                Cum ei ludus feugait luptatum.</div>                                          	                          
                        </li>
                        <li>
                            <a href="images/lion.jpg" title="lion"><img src="images/thumbs/lion.jpg"/></a>        
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div style="left:5px; top:94px; width:336px; height:0;"> 
                                <h1>JQuery Banner Rotator</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                Ut tincidunt mi a lectus gravida pulvinar. Aliquam viverra cursus felis, 
                                lobortis elementum tortor malesuada non. 
                                Suspendisse hendrerit tortor a mauris auctor eu sodales metus laoreet. </div>                                                                     
                        </li>     
                        <li>

                            <a href="images/highway.jpg" title="highway"><img src="images/thumbs/highway.jpg"/></a>                    
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div style="left:484px; top:36px; width:336px; height:0;"> 
                                <h1>JQuery Banner Rotator</h1>
                                Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur. 
                                Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et. 
                                Cum ei ludus feugait luptatum.</div>                             	                           
                        </li>
                        <li>
                            <a href="images/hk.jpg" title="hong kong"><img src="images/thumbs/hk.jpg"/></a>                    
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div style="left:5px; top:36px; width:350px; height:0;"> 
                                <h1>JQuery Banner Rotator</h1>

                                Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur. 
                                Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et. 
                                Cum ei ludus feugait luptatum.</div>                             	                           
                        </li>
                        <li>
                            <a href="images/aquarium.jpg" title="aquarium"><img src="images/thumbs/aquarium.jpg"/></a>                    
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div style="left:484px; top:36px; width:336px; height:0; color:#000; background-color:#FFF"> 
                                <h1 style="color:#0CF">JQuery Banner Rotator</h1>
                                Lorem ipsum ad vis puto molestie, ex est simul docendi, ei ius decore patrioque complectitur. 
                                Per te dolor necessitatibus. Duo quis modo in, reque sonet an pri. In lorem fugit impedit eum, pro docendi rationibus reformidans et. 
                                Cum ei ludus feugait luptatum.</div>                           	                           
                        </li>     
                    </ul>

                </div>     
            </div>
        </div>	
  </div>
    <div class="info-section">
        <div class="form-panel">
            <form name="ctrlForm">
             	<div class="form-sec">
                    <label for="transitions"><b>Transition:</b></label><br/>

                    <select name="transitions" id="transitions">
                        <option value="random" selected="selected">random</option>
                        <option value="none">none</option>
                        <option value="fade">fade</option>
                        <option value="h.slide">horizontal slide</option>
                        <option value="v.slide">vertical slide</option>

                        <optgroup label="vertical stripes">
	                        <option value="vert.random.fade">random fade</option>
                            <option value="vert.tl">top left</option>
                            <option value="vert.tr">top right</option>
                            <option value="vert.bl">bottom left</option>
                            <option value="vert.br">bottom right</option>	
                            <option value="fade.left">left fade</option>

                            <option value="fade.right">right fade</option>
                            <option value="alt.left">left alternating</option>
                            <option value="alt.right">right alternating</option>  
                            <option value="blinds.left">left blinds</option>
                            <option value="blinds.right">right blinds</option>
                        </optgroup>
                        <optgroup label="horizontal stripes">

                        	<option value="horz.random.fade">random fade</option>
                            <option value="horz.tl">top left</option>
                            <option value="horz.tr">top right</option>
                            <option value="horz.bl">bottom left</option>	
                            <option value="horz.br">bottom right</option>	
                            <option value="fade.top">top fade</option> 
                            <option value="fade.bottom">bottom fade</option>

                            <option value="alt.top">top alternating</option>
                            <option value="alt.bottom">bottom alternating</option>
                            <option value="blinds.top">top blinds</option>
                            <option value="blinds.bottom">bottom blinds</option>
                        </optgroup>
                        <optgroup label="blocks">
                            <option value="diag.fade">diagional fade</option> 
                            <option value="diag.exp">diagional expand</option> 
                            <option value="rev.diag.fade">reverse diagional fade</option> 
                            <option value="rev.diag.exp">reverse diagional expand</option> 
                            <option value="block.fade">random fade</option> 
                            <option value="block.exp">random expand</option>	
                            <option value="block.drop">random drop</option>

                            <option value="spiral.in">spiral in</option>
                            <option value="spiral.out">spiral out</option> 
                            <option value="block.top.zz">top zig zag</option>
                            <option value="block.bottom.zz">bottom zig zag</option>
                            <option value="block.left.zz">left zig zag</option>
                            <option value="block.right.zz">right zig zag</option>

                            <option value="block.top">top expand</option>
                            <option value="block.bottom">bottom expand</option>
                            <option value="block.left">left expand</option>
                            <option value="block.right">right expand</option>
                        </optgroup>                        
                    </select>
                </div>

              	<div class="form-sec">
                	<label for="easing"><b>Transition easing:</b></label>
                    <select name="easing" id="easing">
                    	<option value="" selected="selected">none</option>
                        <option value="linear">linear</option>
                        <option value="easeInElastic">easeInElastic</option> 
                        <option value="easeOutElastic">easeOutElastic</option> 
                        <option value="easeInOutElastic">easeInOutElastic</option> 
                        <option value="easeInBack">easeInBack</option> 
                        <option value="easeOutBack">easeOutBack</option> 
                        <option value="easeInOutBack">easeInOutBack</option> 
                        <option value="easeInBounce">easeInBounce</option> 
                        <option value="easeOutBounce">easeOutBounce</option> 
                        <option value="easeInOutBounce">easeInOutBounce</option>                         
                        <option value="easeInCirc">easeInCirc</option> 
                        <option value="easeOutCirc">easeOutCirc</option> 
                        <option value="easeInOutCirc">easeInOutCirc</option>  
                        <option value="easeInQuad">easeInQuad</option> 
                        <option value="easeOutQuad">easeOutQuad</option> 
                        <option value="easeInOutQuad">easeInOutQuad</option> 
                        <option value="easeInCubic">easeInCubic</option> 
                        <option value="easeOutCubic">easeOutCubic</option> 
                        <option value="easeInOutCubic">easeInOutCubic</option> 
                        <option value="easeInQuart">easeInQuart</option> 
                        <option value="easeOutQuart">easeOutQuart</option> 
                        <option value="easeInOutQuart">easeInOutQuart</option> 
                        <option value="easeInQuint">easeInQuint</option> 
                        <option value="easeOutQuint">easeOutQuint</option> 
                        <option value="easeInOutQuint">easeInOutQuint</option> 
                        <option value="easeInSine">easeInSine</option> 
                        <option value="easeOutSine">easeOutSine</option> 
                        <option value="easeInOutSine">easeInOutSine</option> 
                        <option value="easeInExpo">easeInExpo</option> 
                        <option value="easeOutExpo">easeOutExpo</option> 
                        <option value="easeInOutExpo">easeInOutExpo</option>

                    </select>
                </div>
                <div class="form-sec">
                    <label for="texteffects"><b>Textbox Effect:</b></label><br/>
                    <select name="texteffects" id="texteffects">
	                    <option value="none">none</option>
                        <option value="fade" selected="selected">fade</option>

                        <option value="up">expand up</option>
                        <option value="down">expand down</option>
                        <option value="left">expand left</option>                        
                        <option value="right">expand right</option>                       	
                    </select>
                </div>
                <div class="form-sec">
                    <label for="tt-type"><b>Tooltip:</b></label><br/>

                    <select name="tt-type" id="tt-type">
                        <option value="image" selected="selected">image</option>
                        <option value="text">text</option>                        
                        <option value="none">none</option>
                    </select>
                </div>                
                <div class="form-sec">
                    <label for="cpalignments"><b>Control Panel Position:</b></label><br/>

                    <select name="cpalignments" id="cpalignments">
                        <option value="TL">top left</option>
                        <option value="TC">top center</option>
                        <option value="TR">top right</option>
                        <option value="BL">bottom left</option>
                        <option value="BC">bottom center</option>

                        <option value="BR" selected="selected">bottom right</option>
                    </select>
             	</div>
                 <div class="form-sec">       
                    <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                    	<td width="95"><input type="radio" name="cp-pos" value="inside"  id="pos-inside" checked="checked"/>&nbsp;<label for="pos-inside">inside</label></td>
                        <td><input type="radio" name="cp-pos" value="outside" id="pos-outside"/>&nbsp;<label for="pos-outside">outside</label></td>

                   	</tr>
                    </table>
                </div>
                <div class="form-sec">
                    <b>Display:</b><br/>
                    <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                    	<td width="95"><input type="checkbox" name="thumbs-cb" id="thumbs-cb" checked="checked"/>&nbsp;<label for="thumbs-cb">thumbs</label></td>

                        <td><input type="checkbox" id="playbutton-cb" name="playbutton-cb" checked="checked"/>&nbsp;<label for="playbutton-cb">play button</label> </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" id="dbuttons-cb" name="dbuttons-cb" checked="checked"/>&nbsp;<label for="dbuttons-cb">back/forward</label></td>
                    	<td><input type="checkbox" name="timer-cb" id="timer-cb" checked="checked"/>&nbsp;<label for="timer-cb">timer bar</label></td>
                    </tr>
                    </table>

                </div>   
                <div class="form-sec">
                    <b>Mouseover:</b><br/>
                    <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                    	<td width="95"><input type="checkbox" id="pause-cb" name="pause-cb"/>&nbsp;<label for="pause-cb">pause</label></td>
                        <td><input type="checkbox" id="text-cb" name="text-cb"/>&nbsp;<label for="text-cb">text panel</label></td>
                    </tr>

                    <tr>
                    	<td colspan="2"><input type="checkbox" id="cpanel-cb" name="cpanel-cb"/>&nbsp;<label for="cpanel-cb">control panel</label></td>
                    </tr>
                    </table>
                </div>
                <div class="form-sec"><input type="button" value="Submit" id="submit-btn"/>&nbsp;<input type="button" value="Reset" id="reset-btn" style="width:55px"/></div>                
           </form> 
        </div>
	  	<div class="description">

            <p>
                This is a jQuery banner rotator plugin featuring multiple transitions. 
                The thumbnails and buttons allow for easy navigation of your banners. 
                The banner rotator is also re-sizable and configurable through the plugin's parameters and stylesheet.            </p>
            <p><b>Features:</b></p>
            <ul>
                <li>Multiple transitions available, can set a different transition per image.</li>
                <li>Able to load unlimited number of images, each with customizable text description, tooltip, and hyperlink.</li>
                <li>Show or hide components, including play button, directional buttons, thumbnails, text panel, and tooltip.</li>

                <li>Can set to automatically play on startup with customizable timer delay, can set a different time delay for each image.</li>
                <li>Banner, thumbnails, and buttons are all resizable.</li>
                <li>Text description panel can be set at different location, width, height, color, and background color.</li>
                <li>Embed html tags within the text panel.</li>
                <li>Control panel can be set at different location.</li>
                <li>Configurable image or text tooltip for each thumbnail.</li>

                <li>Can set text description and control panel to appear on mouseover.</li>
                <li>Transition block and stripe sizes are configurable.</li>
                <li>Able to shuffle image order.</li>
            </ul>
        </div>
    </div>	
  	<div class="copyright">copyright &copy; 2011 <a href="http://codecanyon.net/user/webtako" target="wt">webtako</a>.</div>

</div>
</body>    
</html>
